import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { DOCS_TREE } from '../utils/constant';
import { Button, Drawer, Tree } from 'antd';
import { getNodesLength } from '../utils/jsUtil'
const { TreeNode } = Tree;
class SideBar extends PureComponent {
  state = {
    expanded: false,
    datalist: DOCS_TREE,
    expandedKeys: [],
  };
  renderNode = () => {
    const dataList = {}
  }

  expandAll = () => {
    const { expanded, datalist } = this.state;
    let expandedKeys = [];
    if (!expanded) {
      const loop = (data) => data.map((item) => {
        expandedKeys.push(item.key)
        if (item.children && item.children.length) {
          loop(item.children)
        }
      })
      loop(datalist)
    }
    this.setState({
      expanded: !expanded,
      expandedKeys
    })
  }
  onSelect = (selectedKeys, e) => {
    console.log(selectedKeys, e)
  }

  onExpand = (keys, { expanded, node }) => {
    const { expandedKeys, datalist } = this.state;
    let _expandedKeys = [].concat(expandedKeys)
    const { children, eventKey } = node.props;
    if (expanded ) {
      _expandedKeys.push(eventKey)
      const loop = data => {
        if (data && data.length) {
          data.map((item) => {
            _expandedKeys.push(item.key)
            loop(item.children)
          })
        }
      }
      loop(children)
    } else {
      for (let [i, itemP] of _expandedKeys.entries()) {
        if (eventKey == itemP) {
          _expandedKeys.splice(i, 1);
          break
        }
      }
      const loop = data => {
        if (data && data.length) {
          data.map((item) => {
            for (let [i, itemP] of _expandedKeys.entries()) {
              if (item.key == itemP) {
                _expandedKeys.splice(i, 1);
                loop(item.children);
                break
              }
            }
          })
        }
      }
      loop(children)
    }
    let _expanded = false;
    if (_expandedKeys.length && _expandedKeys.length == getNodesLength(datalist)) {
      _expanded = true;
    }
    this.setState({
      expandedKeys: _expandedKeys,
      expanded:_expanded
    })
  }
  render() {
    const { expanded, datalist, expandedKeys } = this.state;
    const { visible } = this.props;
    const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.title} />;
    });
    return (
      <Drawer
        width={320}
        closable={false}
        maskClosable={false}
        visible={visible}
        placement="left"
        mask={false}
      >
        <div onClick={() => this.expandAll()} style={{ padding: 10, textAlign: 'right', borderBottom: '1px solid #e5e5e5' }}>{expanded ? 'Collapse All' : 'Expand All'}</div>
        <Tree
          expandedKeys={expandedKeys}
          selectedKeys={[]}
          onExpand={this.onExpand}
          onSelect={this.onSelect}
        >
          {loop(datalist)}
        </Tree>
      </Drawer>
    );
  }
}

export default withRouter(connect()(SideBar))